<template>
  <div>
    <h3>06 - 自己封装一个组件 - 直接使用 js 方法来调用</h3>
    <button @click="fn">Show Modal</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn () {
      // 只需要调用这个方法，组件就自己显示出来
      this.$modal()
      // 1.0 在 plugin 中给 vue 添加一个插件
      // 2.0 在插件中向 vue 中添加一个额外的方法： $modal
      // 3.0 在方法中
      //    创建一个弹出框的组件对象
      //    将弹出框显示出来
      //    进行渲染 ($mount) ，得到 html 结构 ($el)
      //    将 html 结构添加到 body 中（document.body.appendChild(html)）
    }
  }
}
</script>

<style></style>
